<template>
  <div class="app-main">
    <div class="operation-contain">
      <div class="operation-left">
        <el-page-header @back="goBack" content="项目图集" />
      </div>
      <div class="operation-right">
        共 {{ list.data.length }} 张
      </div>
    </div>
    <div class="list-contain">
      <div class="list-item" v-for="item in list.data" :key="item.id">
        <el-image :src="'data:image/png;base64,'+ item.path" lazy :preview-src-list="list.srcList"></el-image>
        <div class="bg-hover" @click="confirmDelete(item.id)">
          <i class="el-icon-delete"></i>
        </div>
      </div>
      <el-upload
        class="avatar-uploader"
        ref="upload"
        :multiple="false"
        :show-file-list="false"
        drag
        action="action"
        accept="image/apng,image/bmp,image/gif,image/jpeg,image/pjpeg,image/png,image/svg+xml,image/tiff,image/webp,image/x-icon"
        :http-request="upload">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Project',
  data () {
    return {
      list: {
        total: 0,
        data: [],
        srcList: [],
        loading: false,
      },
    }
  },
  created () {
    this.getList()
  },
  methods: {
    goBack () {
      this.$router.push('/info/project')
    },
    upload (param) { // （点击按钮，上传图片，上传成功后部署，然后重新加载列表）
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('pid', this.$route.params.id)
      this.$API({
        name: 'AddProjectImage',
        data: formData,
        requireAuth: true
      }).then(res => {
        if (res.data.code == 200) {
          this.$notify.success(res.data.msg)
        } else {
          this.$notify.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.getList()
      })
    },
    getList () { // 获取列表
      this.list.loading = true
      this.$API({
        name: 'GetProjectImageList',
        params: {
          pid: this.$route.params.id
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          this.list.total = res.data.data.count
          this.list.srcList = res.data.data.data.map(item => 'data:image/png;base64,' + item.path)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    confirmDelete (id) { // 删除
      this.$confirm('此操作将删除此图片是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$API({
          name: 'DeleteProjectImage',
          paths: [id],
          requireAuth: true
        }).then (res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(error => {
          this.$message.error(error)
        }).finally(() => {
          this.getList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  .list-contain {
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .list-item {
      position: relative;
      &:hover {
        .bg-hover {
          display: block;
        }
        .el-image {
          border: 1px dashed #409EFF;
        }
      }
      .el-image {
        border: 1px dashed #d9d9d9;
        flex-shrink: 0;
        width: 300px;
        height: 200px;
        margin: 10px;
      }
      .bg-hover {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 3px 5px;
        background: rgba(12, 12, 12, 0.4);
        display: none;
        border-radius: 4px;
        transition: ease 0.3s;
        cursor: pointer;
        .el-icon-delete {
          color: #fff;
          font-size: 18px;
        }
      }
    }
    .avatar-uploader {
      width: 320px;
      height: 220px;
      padding: 10px;
      box-sizing: border-box;
      /deep/ .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
          border-color: #409EFF;
        }
      }
    }
    .avatar-uploader-icon, /deep/ .el-upload-dragger {
      font-size: 28px;
      color: #8c939d;
      width: 300px;
      height: 200px;
      line-height: 200px;
      box-sizing: border-box;
      text-align: center;
    }
    /deep/ .el-upload-dragger {
      border-radius: 0;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>